<template>
  <div class="factor-match-rule-container">
    <!-- 因子匹配规则--表格 -->
    <CPageTable @register="registerPage" v-model:searchForm="searchForm">
      <template #headerRightButton>
        <el-badge :is-dot="isShowDot" class="g-mr8" v-btnPermission="'DM_FLOW_MATCH_VIEW'">
          <el-button type="primary" @click="handleViewUnconfirmedRule" >待确认规则</el-button>
        </el-badge>

        <el-button type="primary" @click="handleAddRule" v-btnPermission="'DM_FACTOR_MATCH_RULE_CREATE'"
          ><CIcon type="c-xian-xinjian" class="g-mr4"></CIcon>新增</el-button
        >
      </template>
      <!-- 适用标准 - slot -->
      <template #applicableStandard="{ scope }">
        <template v-if="scope.row.applicableStandard?.length">
          <span v-for="(item, index) in scope.row.applicableStandard" :key="index">
            <span
              >{{ StandardMap[item] }}
              <span v-if="index + 1 !== scope.row.applicableStandard.length">、</span>
            </span>
          </span>
        </template>
        <span v-else> - </span>
      </template>
      <!-- 规则因子 - slot -->
      <template #factorName="{ scope }">
        <!-- <span>{{
          `${scope.row.factorNo} ${scope.row.factorName} ${scope.row.factor} ${scope.row.factorUnit}`
        }}</span> -->
        <CTableColumn
          :main-text="`${scope.row.factorNo} ${scope.row.factorName}`"
          :sub-text="`${scope.row.factor} ${scope.row.factorUnit}`"
        ></CTableColumn>
      </template>
      <!-- 创建人/创建时间 - slot -->
      <template #updateInfo="{ scope }">
        <CTableColumn
          :main-text="scope.row.creator"
          :sub-text="scope.row.createTime"
        ></CTableColumn>
      </template>
      <!-- 操作 - slot -->
      <template #op="{ scope }">
        <CTableButtonGroup :buttons-config="getTableButtonsConfig(scope.row)" />
      </template>
    </CPageTable>

    <!-- 新增或编辑规则弹出层 -->
    <HandleRuleDialog
      v-model:visible="addOrEditRuleVisible"
      :currentRule="currentRule"
      @refresh="refresh"
    />
    <!-- 待确认规则弹出层 -->
    <UnconfirmedRuleDialog
      v-model:visible="unconfirmedRuleVisible"
      @queryUnConfirmedRule="queryUnConfirmedRule"
      @refresh="refresh"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { CPageTable, useCPageTable, CPageTableProps } from '@/components/CPageTable';
import { useFactorList } from './useFactorList';
import { useOperation } from './useOperation';
import { CTableColumn, CTableButtonGroup } from '@/components/CTable';
import { StandardMap } from '@/constants/pcf';
import HandleRuleDialog from './components/HandleRuleDialog/index.vue';
import UnconfirmedRuleDialog from './components/UnconfirmedRuleDialog/index.vue';
import { hasBtnPermission } from '@/directives/btnPermission';

const { searchOptions, searchForm, tableOptions, tableFieldsSetting } = useFactorList();

const options = reactive<CPageTableProps>({
  title: '因子匹配规则',
  searchOptions: searchOptions,
  tableOptions,
  tableFieldsSetting,
  enableFieldsSetting: true
});
const [registerPage, { refresh }] = useCPageTable(options);
const {
  addOrEditRuleVisible,
  unconfirmedRuleVisible,
  currentRule,
  isShowDot,
  getTableButtonsConfig,
  handleViewUnconfirmedRule,
  handleAddRule,
  queryUnConfirmedRule
} = useOperation(refresh);
</script>

<style scoped lang="scss">
.factor-match-rule-container {
  min-height: 80%;
}
</style>
